<template>
  <div>
    <table border="2" width="600" height="100" align="center">
      <caption>
        <h3>欢迎光临_vue开发的收银系统_水果店</h3>
      </caption>
      <thead>
        <tr>
          <th>苹果 10 ¥/斤，折扣&lt; 8折 &gt;</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            请输入你要购买的斤数
            <input type="number" v-model="num" />
          </td>
        </tr>
        <tr>
          <td>
            <button @click="btn">结账买单~</button>
          </td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>结账单：总价：{{ 10*str }}¥元 折后价：{{ 10*str*0.8 }}¥元 省了：{{ 10*str- 10*str*0.8}}¥元</td>
        </tr>
      </tfoot>
    </table>
  </div>
</template>

<script>
export default {
data() {
  return {
    num:'',
    str:''
  }
},
methods:{
  btn(num) {
      this.str=this.num
  }
}
}
</script>

<style>
tbody,tfoot{
  text-align: center;
}
</style>